<template>
    <div>
        <el-dialog :visible="showDialog">
            <el-steps :active="active" finish-status="success" name= '"active"'>
                <el-step title="步骤 1">
                </el-step>

                <el-step title="步骤 2"></el-step>
                <el-step title="步骤 3"></el-step>
            </el-steps>
            <el-tabs style="height: 200px;" v-model="active1">
                <el-tab-pane name ='0'>
                    <el-form name='form1'>
                        <el-input  placeholder=""></el-input>
                        <el-input  placeholder=""></el-input>
                        <el-input  placeholder=""></el-input>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane name ='1'>配置管理</el-tab-pane>
                <el-tab-pane name ='2'>
                    <el-form name='form2'>
                        <el-input  placeholder=""></el-input>
                        <el-select></el-select>
                    </el-form></el-tab-pane>
            </el-tabs>
            <el-button @click = 'next()'>{{nextText}}</el-button>
        </el-dialog>
        <el-button @click= 'showDialog = true'>show dialog</el-button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      active1: '0',
      showDialog: false,
      nextText: 'next'
    }
  },
  methods: {
    next() {
      // this.active++
      console.log(this.active)
      if (this.active++ > 2) {
        this.active = 0
        this.nextText = 'next'
      }
      if (this.active >= 2) {
        this.active1 = '2'
        this.nextText = 'done'
        return
      } else {
        this.active1 = this.active + ''
        console.log(this.active)
      }
    }
  }
}
</script>

<style lang = 'scss'>
.el-tabs__header {
  display: none !important;
}
</style>